<template>
  <!-- 任务管理 -->
    <div class="taskExecuteManage">
        <!-- 头部 -->
        <div class="classTop">
            <div class="classTop_l">
                <CommonTitle titleName="当前任务量"> </CommonTitle>
                <div class="itemBox itemBox1">
                    <div class="item">
                        <div class="icon">
                            <svg-icon icon-class="project-detail-icon-2" class="icon" />
                        </div>
                        <div class="parBox">
                            <div class="parnum">{{ state.board.pendingTaskNum }}</div>
                            <div class="parname">待配置</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <svg-icon icon-class="project-detail-icon-4" class="icon" />
                        </div>
                        <div class="parBox">
                            <div class="parnum">{{ state.board.waitTaskNum }}</div>
                            <div class="parname">未开始</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <svg-icon icon-class="project-detail-icon-7" class="icon" />
                        </div>
                        <div class="parBox">
                            <div class="parnum">{{ state.board.progressTaskNum }}</div>
                            <div class="parname">进行中</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <svg-icon icon-class="project-detail-icon-1" class="icon" />
                        </div>
                        <div class="parBox">
                            <div class="parnum">{{ state.board.completedTaskNum }}</div>
                            <div class="parname">已完成</div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <svg-icon icon-class="time-out-icon" class="icon" />
                        </div>
                        <div class="parBox">
                            <div class="parnum">{{ state.board.exceedTaskNum }}</div>
                            <div class="parname">已逾期</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="classTop_r">

            </div>
        </div>

        <!-- 表单 -->
        <div class="formBox">
            <el-form :inline="true" :model="taskForm" class="demo-form-inline">
                <el-form-item class="" label="所属项目">
                    <el-input
                        v-model="taskForm.keywords"
                        clearable
                        placeholder="请输入项目名称"
                        style="width: 240px;"
                    />
                </el-form-item>
                <el-form-item class="" label="任务名称">
                    <el-input
                            v-model="taskForm.taskName"
                            clearable
                            placeholder="请输入任务名称"
                            style="width: 240px;"
                    />
                </el-form-item>
                <el-form-item label="任务时间范围">
                    <el-date-picker
                            v-model="taskForm.valueTime"
                            type="datetimerange"
                            size="large"
                            range-separator="-"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            @change="taskTimeChange"
                    />
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-select v-model="taskForm.status" clearable placeholder="请选择任务状态" style="width: 140px;">
                        <el-option
                                v-for="v in state.taskStatusOptions"
                                :key="v.value"
                                :label="v.label"
                                :value="v.value"
                        />
                    </el-select>
                </el-form-item>
                <el-button
                        class="el_classbtn m-r10"
                        color="#FF7B50"
                        style="color: #fff"
                        type="primary"
                        @click="onQuery"
                >
                    搜索
                </el-button>
                <el-button class="el_classbtn" style="" color="#F0F0F0" @click="onReset">
                    重置
                </el-button>
            </el-form>
        </div>
        <tableIndex
                ref="tableIndexRef"
                :tableData="state.tableData"
                :tableHead="tableHead"
                :isIndex="true"
                :notSearch="true"
                :isSelection="false"
                :isRadio="false"
                :height="500"
                :page="page"
                @page-change="pageChange"
        >
            <template #operate>
                <el-table-column label="操作" width="250" align="center" fixed="right">
                    <template #default="{ row }">
                        <el-button
                                color="#FF7B50"
                                size="small"
                                class="button_view"
                                type="primary"
                                @click="toTaskDetails(row)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </template>
            <template #interestStatus="{ row }">
                <svg-icon
                    v-if="row.interestStatus === 1"
                    icon-class="heart-active"
                />
                <svg-icon v-else icon-class="heart" />
            </template>
            <template #projectName="{ row }">
                <span style="color: #ff7b56;cursor: pointer;" @click="toDetails(row)">{{row.projectName}}</span>
            </template>
        </tableIndex>
    </div>
</template>

<script setup>
import CommonTitle from "@/components/CommonTitle.vue";
import TableIndex from "@/components/table/index.vue";
import { ref, reactive, onMounted } from "vue";
import {
    ElInput,
    ElSelect,
    ElOption,
    ElForm,
    ElDatePicker,
} from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { projectTaskApi } from "@/api/project";
import {departmentTasks} from "@/api/taskImplementation";
import {localGet} from "@/common/utils/GlobalUtils";
import SvgIcon from "@/components/SvgIcon/index.vue";

const store = useStore();
const router = useRouter();
const tableHead = reactive([
    { label: '重点关注', prop: 'interestStatus',slot: "interestStatus" },
    {
        prop: "projectName",
        label: "所属项目",
        slot: "projectName"
    },
    {
        prop: "taskType",
        label: "任务类型",
        formatter: (row) => {
            if(row.taskType===1){
                return '部门专属任务'
            }
            return '公共任务';
        }
    },
    {
        prop: "planStartTime",
        label: "计划开始日期",
        width: 120,
    },
    {
        prop: "planEndTime",
        label: "计划结束日期",
        width: 120,
    },
    {
        prop: "workPeriod",
        label: "计划工期",
    },
    {
        prop: "responsibleDepartmentName",
        label: "负责部门",
    },
    {
        prop: "responsibleUserName",
        label: "责任人"
    },
    {
        prop: "taskName",
        label: "任务名称"
    },
    {
        prop: "status",
        label: "任务状态",
        formatter: (row) => {
           let obj = {'-2':'待配置','-1':'未开始','0':'进行中','1':'完成','5':'已逾期'};
            if(row.exceedDays>0 && obj[row.status]){
                return obj[row.status]+'(已逾期)';
            }
            return obj[row.status] || '-';
        },
    },
    {
        prop: "exceedDays",
        label: "逾期天数",
    },
]);
const taskForm = reactive({
    taskName:'',
    keywords: "",
    isHideComplete: "",
    taskType: "",
    status: "",
    startDate:'',
    endDate:'',
    valueTime:[],
});

const page = reactive({
    total: 0,
    current: 1,
    size: 50,
});

const tableOption = ref([
    { label: "任务执行状态", prop: "taskStatus", slot: true },
    { label: "招标项目任务 ", prop: "taskName" },
    { label: "任务编号 ", prop: "tenderTaskId" },
    { label: "任务来源部门 ", prop: "deptName" },
    { label: "招标项目类别 ", prop: "projectTypeExplain", slot: true },
    { label: "招标（比选）方式 ", prop: "tenderTypeExplain", slot: true },
    {
        label: "控制价",
        prop: "tenderAmount",
        formatter: (val) => {
            return val + " 元";
        },
    },
    {
        label: "任务量",
        prop: "totalFlowNum",
        formatter: (val, row) => {
            return row.completeFlowNum + "/" + row.totalFlowNum;
        },
    },
    { label: "当前节点 ", prop: "currentFlowNodeName" },
    { label: "任务创建日期 ", prop: "createTime" },
    { label: "实际完成日期", prop: "realEndTime" },
    { label: "操作", prop: "operation", slot: true, width: 200 },
]);

const state = reactive({
    tableData: [],
    board: {},
    deptList: [
        {
            label: "全部",
            value: "",
        },
        {
            label: "部门专属",
            value: "1",
        },
        {
            label: "公共",
            value: "2",
        },
    ],
    taskStatusOptions: [
        {
            label: "全部",
            value: "",
        },
        {
            label: "待配置",
            value: "-2",
        },
        {
            label: "未开始",
            value: "-1",
        },
        {
            label: "进行中",
            value: "0",
        },
        {
            label: "已完成",
            value: "1",
        },
        {
            label: "已逾期",
            value: "5",
        },
    ],
});

// 根据搜索条件查询
const onQuery = () => {
    getPageList();
};

/**
 * 重置
 */
const onReset = () => {
    for (let key in taskForm) {
        if (typeof taskForm[key] === "string") {
            taskForm[key] = "";
        }
        if (typeof taskForm[key] === "number") {
            taskForm[key] = 0;
        }
        if(Array.isArray(taskForm[key])){
            taskForm[key] = [];
        }
    }
    page.current = 1;
    page.size = 10;
    getPageList();
};


const getBoard = () => {
    departmentTasks.getUserBoard().then((res) => {
        if (res.code === '200') {
            state.board = res.data || [];
        }
    });
};


let tableIndexRef = ref(null);

/**
 * 任务列表分页查询
 */
const getPageList = (param = {}) => {
    projectTaskApi
        .getTaskPage({
            pageNum: page.current,
            pageSize: page.size,
            param: {
                ...taskForm,
                ...param,
                userId:localGet('UserId')
            },
        })
        .then((res) => {
            if (res.code === '200') {
                state.tableData = res.data.content;
                page.total = res.data.totalSize;
            }
        });
};

const onPageChange = (e) => {
    page.current = e.page;
    page.size = e.limit;
    let param = {
        param: {
            queryName: "",
        },
        pageNum: page.current,
        pageSize: page.size,
    };
    getPageList(param);
};

// 跳转 任务配置

const toPath = (key, row) => {
    switch (key) {
        case "edit":
            router.push(
                `/constructionProjectManage/projectImplementationTask/nodeconfig/projectTaskId=${row.projectTaskId}`
            );
            break;
        case "view":
            router.push({
                path: `/constructionProjectManage/projectImplementationTask/taskExecution/projectTaskId=${row.projectTaskId}`,
            });
            break;
        case "公共实施行为明细":
            router.push(`/constructionProjectManage/projectBusiness/nodeImplement`);
            break;
        case "流程节点管理":
            router.push("/tender/taskManage/processNodeManagement");
            break;
        case "预设任务规划管理":
            router.push(
                `/constructionProjectManage/ProjectImplementationTask/presetProject`
            );
            break;
        case "待审批":
            router.push({
                path: "/tender/collaborativeApprovalManagement/index",
                query: {
                    statusType: "1",
                },
            });
            break;
        case "被驳回":
            router.push({
                path: "/tender/collaborativeApprovalManagement/index",
                query: {
                    statusType: "3",
                },
            });
            break;

        default:
            break;
    }
};

/**
 * 时间选择
 * @param e
 */
const taskTimeChange = (e) => {
    if (e) {
        taskForm.startDate = e[0];
        taskForm.endDate = e[1];
        return
    }
    taskForm.startDate = '';
    taskForm.endDate = '';
}

/**
 * 分页
 */
const pageChange = (e) => {
    page.page = e.page;
    page.pageSize = e.limit;

    getPageList();
}

/**
 * 跳转详情
 */
const toDetails = (row) => {
    router.push({
        path: `/constructionProjectManage/projectsPectaculars/pectaculars/type=${1}&id=${
            row?.projectId || ''
        }&name=${row?.projectName || ''}&projectType=${row?.type}&tabId=${row?.type}`
    })
}

/**
 * 任务详情
 */
const toTaskDetails = (row) => {
    router.push({
        path: `/taskImplementationManagement/projectTaskImplementation/taskDetails/projectTaskId=${row.projectTaskId}`
    })
}

onMounted(() => {
    getPageList(); //获取分页
    getBoard(); //获取看板
});
</script>

<style lang="scss" scoped>
.el-form .el-form-item {
  width: auto !important;
}
.taskExecuteManage {
  .classTop {
    display: flex;

    .classTop_l {
      width: 45%;
    }

    .itemBox {
      display: flex;
    }

    .itemBox1 {
      display: flex;
      justify-content: space-between;
      // padding-right: 10%;
    }

    .item {
      width: 0.7813rem;
      height: 0.3125rem;
      padding: 0.0833rem;
      display: flex;
      border-radius: 0.026rem;
      box-shadow: 0 0.0104rem 0.0625rem 0 rgba(0, 0, 0, 0.1);
      margin-right: 0.1042rem;
      cursor: pointer;
      .icon {
        width: 0.125rem;
        height: 0.125rem;
      }

      .parBox {
        margin-left: 0.0521rem;

        .parnum {
          font-size: 0.0729rem;
          font-family: SourceHanSansCN-Medium, SourceHanSansCN;
          font-weight: 500;
          color: #1a1a1a;
          line-height: 0.0833rem;
        }

        .parname {
          font-size: 0.0625rem;
          font-family: SourceHanSansCN-Normal, SourceHanSansCN;
          font-weight: 400;
          color: #999999;
          line-height: 0.0833rem;
        }
      }
    }

    .classTop_r {
      width: 55%;
      padding-top: 4%;
      .itemBtn {
        padding: 0rem 0.0521rem;
        margin-top: 0.0313rem;
      }
    }
  }

  .formBox {
    margin-top: 0.1875rem;
    margin-bottom: 0.1458rem;

    .el-form {
      .el-form-item {
        margin-bottom: 0.0521rem;
        // :deep(.el-input) {
        //   width: 1.3021rem;
        // }
        // :deep(.el-select .el-input) {
        //   width: 0.7292rem;
        // }
      }
      .formBox_top_input {
        :deep(.el-form-item__content) {
          width: 120px;
        }
      }

      .assetInputBtn {
        &:hover {
          background-color: #fff;
          color: $btn-defualt-tx-color;
        }

        .addAssetBtnImg {
          width: 0.0938rem;
          height: 0.0938rem;
        }
      }
    }

    .searchDivider {
      height: 0.2083rem;
      margin: 0 0.1563rem;
    }
  }
}

.el_classbtn {
  margin-top: -0.0521rem;
}

.radio_ {
  display: flex;
  justify-content: right;
  margin: 0.1042rem 0.1042rem 0 0;
}
.search-right-wrap {
  .screen-button {
    width: 0.7813rem;
    height: 0.2083rem;
    border-radius: 0.1042rem;
    border: 0.0052rem solid var(--screen-button-border-color);
  }
}
</style>
